<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 王晓阳
  Date: 2024/4/13
  Time: 9:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="webjars/layui/2.6.8/layui.js"></script>
    <link rel="stylesheet" href="webjars/layui/2.6.8/css/layui.css" media="all">
</head>
<body>
    <div class="layui-container">
        <%--条件查询--%>
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">查询条件</h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-form"  id="searchForm" lay-filter="searchForm">
                        <div class="layui-inline" >
                            <div class="layui-input-inline">
                                <input type="text" name="projectname" placeholder="请输入计划名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select name="state">
                                    <option value="">请选择状态</option>
                                    <option value="1">启用</option>
                                    <option value="2">停用</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <button class="layui-btn" onclick="search()" >查询</button>
                        </div>
                        <div class="layui-inline" >
                            <button type="reset" onclick="chongzhi()" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table id="plotTable" lay-filter="plotTables"  class="layui-table layui-table-hover"></table>

            <%--添加页面--%>
            <div id="add" style="display:none;padding:20px">
                <form class="layui-form" id="addForm" lay-filter="addForm">
                    <div class="layui-form-item" style="display: none">
                        <label class="layui-form-label">状态:</label>
                        <div class="layui-input-block">
                            <input type="text" name="state" value="1"  class="layui-input">
                        </div>
                    </div>
                    <div class="" style="float: left">
                        <label class="layui-form-label">计划名称:</label>
                        <div class="layui-input-block">
                            <input type="text" name="projectname" class="layui-input ">
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px;margin-left: 100px" >
                        <label class="layui-form-label ">巡检路线:</label>
                        <div class="layui-input-block">
                            <select name="routeid">
                                <option value="">请选择巡检路线</option>
                            </select>
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px">
                        <label class="layui-form-label">创建时间:</label>
                        <div class="layui-input-block">
                            <input type="text" name="settime" style="display: none">
                            <input type="datetime-local" id="settime" step="1"  class="layui-input">
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px;margin-left: 90px">
                        <label class="layui-form-label">制定人 :</label>
                        <div class="layui-input-block" style="padding-left: 8px">
                            <select name="producer">
                                <option value="">请选择制定人</option>
                                <optgroup label="管理员" name="guanliyuan">
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px">
                        <label class="layui-form-label">开始日期:</label>
                        <div class="layui-input-block">
                            <input type="text" name="sriqi"  style="display: none">
                            <input type="date"  step="1" id="sriqi" class="layui-input">
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px;margin-left: 160px;margin-right: 20px">
                        <label class="layui-form-label">结束日期:</label>
                        <div class="layui-input-block">
                            <input type="text" name="eriqi" style="display: none">
                            <input type="date"  step="1" id="eriqi" class="layui-input">
                        </div>
                    </div>
                    <%--                  //日期范围--%>
                    <input type="text" name="dateradius" style="display: none">
                    <div class="" style="float: left;margin-bottom: 20px;">
                        <label class="layui-form-label">开始时间:</label>
                        <div class="layui-input-block">
                            <input type="text" name="stime"  style="display: none">
                            <input type="time"  step="1" id="stime" class="layui-input">
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px;margin-left: 190px">
                        <label class="layui-form-label">结束时间:</label>
                        <div class="layui-input-block">
                            <input type="text" name="etime"  style="display: none">
                            <input type="time"  step="1" id="etime" class="layui-input">
                        </div>
                    </div>
                    <%--                    //时间范围--%>
                    <input type="text" name="timeradius" style="display: none">
                    <div class="" style="float: left;margin-bottom: 20px;">
                        <label class="layui-form-label">签到方式:</label>
                        <div class="layui-input-block">
                            <select name="signtype">
                                <option value="">请选择签到方式</option>
                                <option value="1">现场拍照</option>
                                <option value="2">现场定位</option>
                            </select>
                        </div>
                    </div>

                    <div style="float: left;margin-bottom: 20px;margin-left: 70px">
                        <label class="layui-form-label ">计划巡检人:</label>
                        <div class="layui-input-block" style="width: 230px">
                            <select name="users">
                                <option value="">请选择巡检人</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>

            <%--修改页面--%>
            <div id="update" style="display:none;padding:20px">
                <form class="layui-form" id="updateForm" lay-filter="updateForm">
                    <div class="" style="display: none">
                        <label class="layui-form-label" >编号:</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="display: none">
                        <label class="layui-form-label">状态:</label>
                        <div class="layui-input-block">
                            <input type="text" name="state" value="1"  class="layui-input">
                        </div>
                    </div>
                    <div class="" style="float: left">
                        <label class="layui-form-label">计划名称:</label>
                        <div class="layui-input-block">
                            <input type="text" name="projectname" class="layui-input ">
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px;margin-left: 100px" >
                        <label class="layui-form-label ">巡检路线:</label>
                        <div class="layui-input-block">
                            <select name="routeid">
                                <option value="">请选择巡检路线</option>
                            </select>
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px">
                        <label class="layui-form-label">创建时间:</label>
                        <div class="layui-input-block">
                            <input type="text" name="settime" style="display: none">
                            <input type="datetime-local" id="settimes" step="1"  class="layui-input">
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px;margin-left: 90px">
                        <label class="layui-form-label">制定人 :</label>
                        <div class="layui-input-block" >
                            <select name="producer">
                                <option value="">请选择制定人</option>
                                    <optgroup label="管理员" name="guanliyuan">
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px;">
                        <label class="layui-form-label">开始日期:</label>
                        <div class="layui-input-block">
                            <input type="text" name="sriqi"  style="display: none">
                            <input type="date"  step="1" id="sriqis" class="layui-input">
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px;margin-left: 160px;margin-right: 20px">
                        <label class="layui-form-label">结束日期:</label>
                        <div class="layui-input-block">
                            <input type="text" name="eriqi" style="display: none">
                            <input type="date"  step="1" id="eriqis" class="layui-input">
                        </div>
                    </div>
                    <%--                  //日期范围--%>
                    <input type="text" name="dateradius" style="display: none">
                    <div class="" style="float: left;margin-bottom: 20px;">
                        <label class="layui-form-label">开始时间:</label>
                        <div class="layui-input-block">
                            <input type="text" name="stime"  style="display: none">
                            <input type="time"  step="1" id="stimes" class="layui-input">
                        </div>
                    </div>
                    <div class="" style="float: left;margin-bottom: 20px;margin-left: 190px">
                        <label class="layui-form-label">结束时间:</label>
                        <div class="layui-input-block">
                            <input type="text" name="etime"  style="display: none">
                            <input type="time"  step="1" id="etimes" class="layui-input">
                        </div>
                    </div>
                    <%--                    //时间范围--%>
                    <input type="text" name="timeradius" style="display: none">
                    <div class="" style="float: left;margin-bottom: 20px;">
                        <label class="layui-form-label">签到方式:</label>
                        <div class="layui-input-block">
                            <select name="signtype">
                                <option value="">请选择签到方式</option>
                                <option value="1">现场拍照</option>
                                <option value="2">现场定位</option>
                            </select>
                        </div>
                    </div>

                    <div style="float: left;margin-bottom: 20px;margin-left: 70px">
                        <label class="layui-form-label ">计划巡检人:</label>
                        <div class="layui-input-block" style="width: 230px">
                            <select name="users">
                                <option value="">请选择巡检人</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
    </div>
    <%--头部工具栏，添加--%>
    <script type="text/html" id="headTool">
        <button class="layui-btn" onclick="add()">添加巡检计划</button>
    </script>
    <script>
        let $=layui.$
        //发送ajax请求去读
        $.get("/Site/Siteroute/show2")
            .then(({data})=>{
                console.log(data)
                //data:数组
                $(data).each(function (i,e){
                    let option = $("<option value='"+e.id+"'>"+e.routename+"</option>");
                    $("[name=routeid]").append(option);
                });
                //重新渲染下拉列表
                layui.form.render('select');
            });
        //发送ajax请求去
        $.get("/Site/SiteProject/showprducer")
            .then(({data})=>{
                //data:数组
                $(data).each(function (i,e){
                    let option = $("<option value='"+e.id+"'>"+e.username+"</option>");
                    $("[name=guanliyuan]").append(option);
                });
                //重新渲染下拉列表
                layui.form.render('select');
            });
        //发送ajax请求去查询维修部的巡查人员
        $.get("/Site/SiteProject/showusermc")
            .then(({data})=>{
                //data:数组
                $(data).each(function (i,e){
                    let option = $("<option value='"+e.id+"'>"+e.username+"</option>");
                    $("[name=users]").append(option);
                });
                //重新渲染下拉列表
                layui.form.render('select');
            });
        //渲染表格
        layui.use(function (){
            let table=layui.table;
            table.render({
                id:"one",
                elem:"#plotTable",
                page : true,
                limit : 5,
                limits : [5,10,15,20],
                method : "post",
                contentType : "application/json",
                url:"/Site/SiteProject/show",
                toolbar: "#headTool",
                cols:[[
                    {field:'id',align: 'center',hide:true,title:"编号"},
                    {field:'projectname',align: 'center',title:"计划名称"},
                    {field:'siteroute',width:100,align: 'center',title:"计划路线",templet(d) {
                            return d.siteroute.routename == null ? "-" : d.siteroute.routename;
                    }},
                    {field:'signtype',align: 'center',title:"签到方式",templet(d) {
                            return d.signtype == 1 ? "现场拍照" : "现场定位";
                    }},
                    {field:'dateradius',align: 'center',title:"日期范围"},
                    {field:'timeradius',align: 'center',title:"时间范围"},
                    {field:'user',align: 'center',title:"制定人",templet(d) {
                            return d.user == null ? "-" : d.user.username;
                    }},
                    {field:'settime',align: 'center',title:"制定时间"},
                    {field:'state',align: 'center',title:"状态",templet(d){
                        return d.state==1 ? "启用" : "停用";
                    }},
                    {field:'plotid',align: 'center',hide:true,title:"小区"},
                    {fixed: 'right', title:'操作', templet(d){
                        if (d.state==1){
                            return "<a class='layui-btn layui-btn-xs' lay-event='update'>修改</a>" +
                                "<a class='layui-btn layui-btn-xs layui-btn-danger' lay-event='delete'>删除</a>" +
                                "<a class='layui-btn layui-btn-xs layui-bg-blue' lay-event='qiting'>停用</a>";
                        }else if (d.state==2){
                            return "<a class='layui-btn layui-btn-xs' lay-event='update'>修改</a>" +
                                "<a class='layui-btn layui-btn-xs layui-btn-danger' lay-event='delete'>删除</a>" +
                                "<a class='layui-btn layui-btn-xs layui-bg-blue' lay-event='qiting'>启用</a>";
                        }
                    }}
                ]]
            })
            //监听行工具栏事件
            table.on("tool(plotTables)",function (obj){
                if(obj.event == "delete"){
                    deletes(obj.data.id);
                }else if(obj.event == "update"){
                    updates(obj);
                } else if(obj.event == "qiting"){
                    qiting(obj.data.id);
                }
            })
        })

        //修改
        function updates(obj){
            //先赋值
            layui.form.val('updateForm', obj.data);

            $("#settimes").val(obj.data.settime)

            var split = obj.data.dateradius.split("~");
            $("#sriqis").val(split[0])
            $("#eriqis").val(split[1])

            var split1 = obj.data.timeradius.split("~");
            $("#stimes").val(split1[0])
            $("#etimes").val(split1[1])

            console.log(obj.data.user.id)
            $("[name = routeid]").val(obj.data.siteroute.id)
            $("[name = producer]").val(obj.data.user.id)


            layui.form.render('select');
            //弹窗
            layui.layer.open({
                type : 1,
                title : "修改用户",
                area:["900px","500px"],
                content: $("#update"),
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    $("[name = sriqi]").val($("#sriqis").val());
                    $("[name = eriqi]").val($("#eriqis").val());
                    $("[name = stime]").val($("#stimes").val());
                    $("[name = etime]").val($("#etimes").val());

                    $("[name = dateradius]").val($("[name = sriqi]").val()+"~"+$("[name = eriqi]").val())
                    $("[name = timeradius]").val($("[name = stime]").val()+"~"+$("[name = etime]").val())

                    var replace = $("#settimes").val().replace("T"," ");

                    $("[name = settime]").val(replace);

                    //通过表单序列化，获取输入的内容
                    var updateForm = layui.form.val("updateForm");


                    //发送ajax请求
                    $.post("/Site/SiteProject/update",updateForm)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');

                            // $("#createtimes").val( $("#createtime").val())
                        });
                }
            });
        }
        //点击添加
        function add(){
            //清一下数据
            $("#addForm")[0].reset();
            layui.layer.open({
                type : 1,
                title : "添加",
                area:["900px","500px"],
                content: $("#add"),
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    $("[name = sriqi]").val($("#sriqi").val());
                    $("[name = eriqi]").val($("#eriqi").val());
                    $("[name = stime]").val($("#stime").val());
                    $("[name = etime]").val($("#etime").val());

                    $("[name = dateradius]").val($("[name = sriqi]").val()+"~"+$("[name = eriqi]").val())
                    $("[name = timeradius]").val($("[name = stime]").val()+"~"+$("[name = etime]").val())

                    var replace = $("#settime").val().replace("T"," ");

                    $("[name = settime]").val(replace)

                    //通过表单序列化，获取输入的内容
                    var addForm = layui.form.val("addForm");
                    //发送ajax请求
                    $.post("/Site/SiteProject/add",addForm)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        });
                }
            });
        }

        //点击去查询
        function search(){
            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');

            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('one',{where : where});
        }
        //点击重置
        function chongzhi(){
            $("[name=projectname]").val("");
            $("[name=state]").val("");
            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');
            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('one',{where : where});
        }

        //修改启用/停用状态
        function qiting(id){
            //弹窗
            layui.layer.open({
                type : 0,
                title : "提示",
                area:["260px","180px"],
                content:"  确定修改吗？",
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    //发送ajax请求
                    $.post("/Site/SiteProject/updateType?id="+id)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        });
                }
            });
        }

        //点击删除
        function deletes(id){
            layui.layer.open({
                type : 0,
                title : "提示",
                area:["260px","180px"],
                content:"  确定删除吗？",
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    $.get("/Site/SiteProject/delete?id="+id)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        })
                }
            });
        }
    </script>
</body>
</html>
